<template>
	<div class="business-options">
		<div class="radio-mask" v-if="read"></div>
		<template v-for="(item,index) in listData">
			<label @click="checkItem(item,index)" class="radio-group" :key="index">
				<radio class="radio" :checked="item.checked" color="#06C36E" />
				<text class="text">{{$t(item.title)}}</text>
			</label>
		</template>
	</div>
</template>

<script>
	export default {
		props: ['itemValue', "read"],
		data() {
			return {
				listData: [{
					id: 1,
					title: "货物运输",
					icon: "/static/card/t1.png",
					checked: false
				}, {
					id: 2,
					title: "国际快递",
					icon: "/static/card/t2.png",
					checked: false
				}]
			}
		},
		created() {
			if (this.itemValue) {
				this.init()
			}
		},
		watch: {
			itemValue() {
				this.init()
			}
		},
		methods: {
			init() {
				this.listData.forEach(item => {
					const exists = String(this.itemValue).split(",").find(str => str == item.id)
					if (exists) item.checked = true
				})
			},
			checkItem(item, index) {
				if (this.read) return
				item.checked = !item.checked;
				this.$emit("change", {
					ids: this.listData.filter(item => item.checked).map(item => item.id).join(
						","),
					labels: this.listData.filter(item => item.checked).map(item => item.title).join(
						",")
				})
			}
		}
	}
</script>

<style lang="less">
	.business-options {
		font-size: 24rpx;
		color: #9E9E9E;
		display: flex;
		align-items: center;
		justify-content: space-between;
		padding: 20rpx 100rpx;
		position: relative;

		.radio-mask {
			position: absolute;
			width: 100%;
			height: 100%;
			top: 0;
			left: 0;
			z-index: 9;
		}

		.radio-group {
			display: flex;
			align-items: center;
		}
	}

	.radio {
		transform: scale(0.8);
	}
</style>